import styled from 'styled-components';
import React, { useState } from 'react';
import {
    SaveOutlined, AppstoreOutlined, MailOutlined, BuildOutlined, CodeOutlined,
    SisternodeOutlined, TableOutlined, ApartmentOutlined, ConsoleSqlOutlined, SettingOutlined,
    ExceptionOutlined, ClusterOutlined, ExportOutlined, UploadOutlined, DownloadOutlined
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Modal, Divider } from 'antd';

import { Button } from '../../../components';

export const MenuBar = (props: { category: string, onCommand: (command: { command: string, options: any }) => Promise<void> | void }) => {

    const [isImportOpen, setIsImportOpen] = useState<boolean>(false);

    return (
        <Container data-tauri-drag-region>
            <LeftContainer>
                <Group>
                    <Button width={40} icon={<UploadOutlined />}
                        title={'保存'} onClick={async () => {
                            //弹出对话框
                            props.onCommand({ command: 'save', options: {} });
                        }}>
                    </Button>
                    <Button width={40} icon={<DownloadOutlined />}
                        title={'导出'} onClick={async () => {
                            //弹出对话框
                            props.onCommand({ command: 'export', options: {} });
                        }}>
                    </Button>
                </Group>
                <Divider type={'vertical'} style={{ height: '35px' }} />
                <Group>

                </Group>
                <Divider type={'vertical'} style={{ height: '35px' }} />
                <Group>
                    {/* <Button width={40} icon={<ConsoleSqlOutlined />}
                        reverseFill={false}
                        active={current === 'query'} title={'查询'} onClick={async () => {
                            dispatch(setCurrent('query'));
                        }}>
                    </Button> */}
                </Group>
            </LeftContainer>
            <CenterContainer data-tauri-drag-region>

            </CenterContainer>
            <RightContainer data-tauri-drag-region>
                {/* <Button width={40} icon={<BuildOutlined />} title={'模型'}
                    disabled={true} onClick={async () => {
                        //弹出生成模型的对话框
                    }}></Button>
                <Button width={40} icon={<CodeOutlined />} title={'代码'}
                    disabled={true} onClick={async () => {
                        //弹出生成代码的对话框
                    }}></Button>
                <Button width={40} icon={<SettingOutlined />} title={'设置'}
                    disabled={true} onClick={async () => {
                        //弹出生成代码的对话框
                    }}></Button> */}
            </RightContainer>
            <Modal title="导入" open={isImportOpen} destroyOnClose={true} onOk={() => {
                setIsImportOpen(false);
            }} onCancel={() => {
                setIsImportOpen(false);
            }}
                footer={null}>
            </Modal>
        </Container>
    );
}

export default MenuBar;


const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    background-color: #DDDDDD;
`;

const LeftContainer = styled.div`
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
`;

const CenterContainer = styled.div`
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
`;

const RightContainer = styled.div`
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
`;

const Group = styled.div`
    padding: 0 0px;
`;